<template>
  <div>
    <movie-header></movie-header>

    <div class="contentMain">
      <Card class="card">
        <p slot="title">
          添加文章
        </p>
        <Form ref="formInline" :model="formInline" :label-width="100">
          <Row>
            <i-col span="8" offset="8">
              <FormItem prop="articleTitle" label="文章名称">
                <i-input
                  type="text"
                  v-model="formInline.articleTitle"
                  placeholder="ArticleTitle"
                >
                </i-input>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col span="16" offset="4">
              <FormItem prop="articleContext" label="文章内容">
                <i-input
                  type="textarea"
                  v-model="formInline.articleContext"
                  placeholder="ArticleContext"
                >
                </i-input>
              </FormItem>
            </i-col>
          </Row>
        </Form>
        <Row>
          <i-col span="24">
            <Button type="primary" @click="addArticle('formInline')">
              添加
            </Button>
          </i-col>
        </Row>
      </Card>
    </div>

    <movie-footer></movie-footer>
  </div>
</template>

<script>
import MovieHeader from '@/components/MovieHeader'
import MovieFooter from '@/components/MovieFooter'

export default {
  components: {
    MovieHeader,
    MovieFooter
  },
  data() {
    return {
      formInline: {
        articleTitle: '',
        articleContext: ''
      }
    }
  },
  methods: {
    addArticle(name) {
      const formData = {
        userId: localStorage.getItem('_id'),
        token: localStorage.getItem('token'),
        username: localStorage.getItem('username'),
        articleTitle: this.formInline.articleTitle,
        articleContext: this.formInline.articleContext
      }
      this.$http
        .post('http://localhost:3000/admin/articleAdd', formData, {
          emulateJSON: true
        })
        .then(({ body }) => {
          const { status, message } = body
          if (status === 200) {
            this.$Message.success({
              content: message,
              duration: 2,
              closable: true
            })
            this.$refs[name].resetFields()
          }
        })
    }
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
</style>
